<!DOCTYPE html>
<html>
<!-- 曾浩南 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>院线管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body class="layui-layout-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px">
        <button class="layui-btn layui-btn-normal" data-target="../view/cinema/addCinema.html">
            <a href="../view/cinema/addCinema.html">添加院线</a>
        </button>
        <input type="text" id="txtCont" required lay-verify="required" placeholder="关键字查询" style="width: 300px; height: 25px; margin-left: 50px;">
        <!-- //搜索按钮 -->
        <button class="layui-btn layuiadmin-btn-admin layui-btn-sm" lay-submit="" lay-filter="" id="btn_search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
        </button>
        <!-- //搜索按钮 -->
        <table id="table" lay-filter="tab"></table>
    </div>
    <script src="../js/lodash.min.js"></script>
    <script src="../layui/jquery-1.12.4.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script>

        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: "#table",
                url: "/api/Cinema",
                page: true,//开启分页
                cols: [[ //表头
                    {
                        field: 'image',
                        title: '图片',
                        templet: `
                            <div>
                                <img src="../..{{d.image}}" alt="lost">
                             </div>
                        `
                    },
                    {
                        field: 'name',
                        title: '院线名',
                    },
                    {
                        field: 'addr',
                        title: '地址'
                    },
                    {
                        field: 'tel',
                        title: '电话',
                    },
                    {
                        title: '操作',
                        width: 250,
                        templet:
                            `<div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm"  onclick="puts('{{d._id}}')">
                                编辑
                            </button>
                            <button class="layui-btn layui-btn-sm"  onclick="manage('{{d._id}}')">
                               上映和场次管理
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" onclick="deletes('{{d._id}}',this)">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                        </div>`
                    },
                ]],
                done: function (res, curr, count) {
                    hoverOpenImg();//显示大图
                    $('table tr').on('click', function () {
                        $('table tr').css('background', '');
                        $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                    });
                }
            });


        });
        function hoverOpenImg() {//显示大图
            var img_show = null;
            $('td img').hover(function () {
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:130px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: ['160px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:90px');
        }
        //查询
        $("#btn_search").click(function () {
            const key = $("#txtCont").val();
            layui.table.reload("table", {
                where: {
                    key,
                    page: 1,
                },
                page: {
                    curr: 1 //重新设置第一页
                }
            });
        })

        function deletes(id, btn) {
            layer.confirm('确定要删除吗?',
                {
                    icon: 3,
                    title: '删除',
                }, function (index) {
                    $.ajax({
                        url: "/api/Cinema/" + id,
                        method: "delete",
                    });
                    $(btn).parents("tr").remove();
                    layer.close(index);
                });
        }

        //修改
        function puts(id) {
            location.href = "../view/cinema/updateCinema.html?id=" + id;
        }
        //  上映和场次管理
        function manage(id) {
            location.href = "../view/movieAndCinema/movieAndCiname.html?id=" + id;
        }
    </script>
</body>

</html>